<template>
	<view class="u-padding-bottom-40" :class="currentTheme">
		<a-nabbar :name="pageType.pageTitle" />
		<view class="u-padding-32">
			<view class="u-padding-bottom-20 u-padding-top-8 u-flex" v-if="pageType.tips">
				<u-icon name="yijianfankui" class="u-margin-right-8" size="40" custom-prefix="custom-icon" color="#765CFE"></u-icon>
				<text class="u-font-24 text-color-6A6A7C tips">{{pageType.tips}}</text>
			</view>
			<view class="u-padding-top-10 u-padding-bottom-30 text-bold"  v-if="type==='applyAfterSale'">
				<label-box label="售后类型"  labelSize="32" labelWidth="130">
					<select-item :list="afterTypeList" v-model="afterType"></select-item>
				</label-box>
			</view>
			<!-- 体验本-退还 -->
			<template v-if="type=='experienceProductReturn'">
				<view class="u-padding-top-10 text-bold">
					<label-box label="物流公司"  labelSize="32" labelWidth="130">
						<select-item  :list="expressList" v-model="deliveryStr" @getSelect="getSelect"></select-item>
					</label-box>
				</view>
				<view class="u-padding-top-10 u-padding-bottom-30 text-bold">
					<label-box label="物流单号"  labelSize="32" labelWidth="130">
						<item-input  v-model="deliveryId" :placeholder="'请输入物流单号'"></item-input>
					</label-box>
				</view>
			</template>
			<view class=" u-margin-bottom-50 u-margin-top-30" v-if="['evaluate','settingTest'].includes(type)">
				<text class="u-font-32 box-title text-bold u-margin-right-70">剧本打分</text>
				<u-rate :count="5" allow-half v-model="rateValue" size="40" gutter="33" active-color="#F6B37F" inactive-color="#BCBCC3" inactive-icon="star-fill"></u-rate>
			</view>
			<text class="u-font-32 box-title text-bold u-margin-bottom-26">{{pageType.title}}</text>
			
			<view  class="u-margin-top-32 u-position-relative textarea-box">
				<item-input v-model="content"  type="textarea" :border="false"  maxlength="300"  height="203"  :auto-height="false" :custom-style="customStyle" :placeholder="pageType.placeholder"></item-input>
				<!-- <u-input @input="getChange" type="textarea" :border="false"  height="203" :auto-height="false" maxlength="300" :custom-style="customStyle" :clearable="false" :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/> -->
				<view class="max-length-txt text-color-9598a4 u-font-28">
					{{contentLen}}/300字
				</view>
			</view>
			<view class="">
				<view class="u-flex u-row-between u-margin-bottom-26 u-margin-top-26">
					<text class="box-title u-font-32 text-bold">上传图片</text>
					<text class="u-font-28 text-tips">最多可上传{{type=='experienceProductReturn'?3:9}}张</text>
				</view>
				<uploader ref="image" :bgColor="currentThemeObj.backgroundSecondColor" @getImgStr="getImgStr"  @uploaded="uploaded" :maxCount="type=='experienceProductReturn'?3:9"></uploader>
			</view>
		</view>
		<fixed-team :btnText="pageType.submitText || '确定'"  @btnClick="save"></fixed-team>
	</view>
</template>

<script>
	import {randomString} from '@/api/updataFile.js'
	import uploader from '@/components/upload/upload.vue'
	import data from '@/data/index.js'
	import {add,customRequest,getDetail} from '@/api/crud.js'
	export default {
		components: {
			uploader
		},
		data() {
			return {
				afterTypeList:data.afterTypeList,
				content:'',
				customStyle:{
					background:'#E6E6E6',
					borderRadius:'17rpx',
					padding:'26rpx',
					color:'#333333'
				},
				rateValue:5,
				type:'',
				oss:'',
				formData:'',
				apiModule:"shopApi",
				images:'',
				productId:'',
				cartInfoId:"",
				orderId:'',
				experienceProductId:'',//体验商城id
				loading:false, 
				afterType:"退款并退货",
				uploadFlag:true,
				driveCarId:'',
				expressList:[],//快递公司列表
				deliverySn:'',//快递公司编号
				deliveryStr:'',
				deliveryId:'',//物流单号
			};
		},
		async onLoad(option) {
			this.type = option.type
			this.id = option.id
			this.productId = option.productId
			this.productName = option.productName
			this.cartInfoId = option.cartInfoId
			this.orderId = option.orderId
			this.experienceProductId = option.experienceProductId
			this.driveCarId = option.driveCarId
			this.exhibitId = option.exhibitId
			try{
				// await this.$store.dispatch('getOss');
				// const oss = this.$store.getters.oss;
				// this.oss = this.$store.getters.oss;
				// this.formData = {
				// 	policy: this.oss.policy,
				// 	dir:this.oss.dir,
				// 	OSSAccessKeyId: this.oss.accessKeyId,
				// 	success_action_status: "200",
				// 	signature: this.oss.signature,
				// }
			}catch(e){
				console.log(e)
				//TODO handle the exception
			}
			//如果是体验本 需要查询快递公司
			if(option.type=='experienceProductReturn'){
				//查询快递公司
				getDetail('','express',this.apiModule,'list').then(res=>{
					this.expressList = res.map(val=>({
						label:val.name,
						value:val.id,
						extra:val
					}));
				})
			}
		},
		computed:{
			pageType(){
				return {
					feedback:{
						pageTitle:'意见反馈',
						title:'反馈内容',
						placeholder:'请详细描述反馈问题，我们将全力为您解决',
						submitText:'提交反馈内容'
					},
					settingTest:{
						pageTitle:'剧本评测',
						title:'编辑评测',
						placeholder:'请描述评测内容',
						submitText:'提交'
					},
					evaluate:{
						pageTitle:'立即评价',
						tips:"你的评价将提交给发行及作者，给出你宝贵的建议和意见吧！",
						title:'填写评价',
						placeholder:'请输入评价内容',
						submitText:'提交评价'
					},
					applyAfterSale:{
						pageTitle:'申请售后',
						title:'描述售后原因',
						placeholder:'请描述售后原因',
						submitText:'提交售后申请'
					},
					experienceProductReturn:{
						pageTitle: '我要退还',
						title: '退还原因',
						placeholder: '请详细描述反馈问题，我们将全力为您解决',
						submitText: '提交'
					}
				}[this.type]
			},
			loginForm(){
				return this.$store.getters.loginForm
			},
			uid(){
				return this.loginForm.uid
			},
			contentLen(){
				return this.content.length>=300?300:this.content.length
			}
		},
		methods: {
			
			async save(){
				try{
					const lists = this.images
					if(!lists.length&&!this.content){
						this.$u.toast('请填写描述或上传图片')
						return false;
					}
					if(!lists.length&&!this.content){
						this.$u.toast('请填写描述或上传图片')
						return false;
					}
					if(!this.uploadFlag){
						this.$u.toast('图片上传中')
						return false;
					}
					if(this.type==='commit'){
						if(!this.form.address){
							this.$u.toast('请选择地址')
							return false;
						}
					}
					
					if(this.type==='experienceProductReturn'){
						if(!this.deliverySn){
							this.$u.toast('请选择物流公司')
							return false;
						}
						if(!this.deliveryId){
							this.$u.toast('请填写物流单号')
							return false;
						}
						if(!lists.length){
							this.$u.toast('请上传图片')
							return false;
						}
					}

					if(this.type){
						this.loading = true;
						await this[this.type](lists)
						this.routeBack('保存成功')
					}
				}catch(e){
					this.loading =false;
					//TODO handle the exception
				}
			},
			//获取快递公司对应code
			getSelect(item){
				this.deliverySn = (item[0].extra).code;
			},
			//上传的图片
			getImgStr(str){
				this.images = str;
			},
			//意见反馈
			feedback(lists){
				const {getters} = this.$store
				return add({
					content:this.content,
					image:lists,
					openid:getters.tokenForm.openid,
					status:0,
					uid:this.uid,
					showLoading:true
				},this.type,this.apiModule)
			},
			//展会剧本评测
			settingTest(lists=[]){
				const {hxUsername,avatar,nickname,exhibitId} = this.loginForm;
				const imgs = Array.isArray(lists) ? lists.join(',') : lists
				return add({
					driveCarId:this.driveCarId,
					exhibitId:this.exhibitId || exhibitId,
					"content":this.content,
					userId:this.uid,
					productId:this.productId,
					image:imgs,
					userName:hxUsername,
					productScore:this.rateValue,
					nickname,
					productName:this.productName,
					avatar
				},'exhibitProductComment','shopApi')
			},
			//商城剧本评价
			evaluate(lists){
				return customRequest({
					"comment":this.content,
					"pics": lists,
					"oid": this.id,
					"uid": this.uid,
					cartInfoId:this.cartInfoId || '',
					productScore:this.rateValue,
					serviceScore:this.rateValue,
					experienceProductId:this.experienceProductId || null,
				},'storeOrder',this.apiModule,'evaluate','post')
			},
			//售后申请
			applyAfterSale(lists){
				const afterType = this.afterTypeList.find(val=>val.label===this.afterType)
				return customRequest({
					"content":this.content,
					"image": lists,
					"oid": this.id,
					"uid": this.uid,
					afterType:afterType.value,
					cartInfoId:this.cartInfoId
				},'storeOrder',this.apiModule,'applyAfterSale','post')
			},
			//体验本退还
			experienceProductReturn(lists){
				const imgs = Array.isArray(lists) ? lists.join(',') : lists
				return add({
					"content":this.content,
					deliveryId:this.deliveryId,
					deliverySn:this.deliverySn,
					experienceProductId:this.experienceProductId,
					image:imgs,
					orderId:this.orderId,
					"uid": this.uid,
				},'experienceProductReturn','shopApi')
			},
			uploaded(flag){
				this.uploadFlag = flag;
			}
		}
	}
</script>

<style lang="scss" scoped>
.add-btn{
	width: 210rpx;
	height: 210rpx;
	display:  flex;
	align-items: center;
	background-color: #1F1B34;
	justify-content: center;
	border-radius: 17rpx;
}
.commit{
	background: #765CFE;
	color: white;
	width: 300rpx;
	height: 74rpx;
	line-height: 74rpx;
	font-size: 28rpx;
	border-radius: 100rpx;
	text-align: center;
	margin: 50rpx auto;
}
.tips{
	white-space: nowrap;
}
.max-length-txt{
	right:20rpx;
	bottom: 20rpx;
	text-align: right;
	margin-right: 20rpx;
}
.textarea-box{
	background: rgb(230, 230, 230);
  border-radius: 16rpx;
  padding: 0 0 26rpx 0;
  color: rgb(51, 51, 51);
}
</style>
